const username_button = document.getElementById('user_submit_button');
const username_input = document.getElementById('username_input');

const captcha_div = document.getElementById('captcha_submit_div');
const captcha_img_div = document.getElementById('captcha_img_div');

const captcha_submit_form = document.getElementById('captcha_submit_form');

username_button.onclick = e => {

    const username_readonly = document.getElementById('username_readonly');

    if (captcha_submit_form.style.display !== "none") {
        username_button.textContent = "获取验证码"
        username_input.removeAttribute('readonly');
        captcha_submit_form.style.display = "none";
        return
    } else {
        username_button.textContent = "切换用户";
        username_readonly.value = username_input.value;
        username_input.setAttribute('readonly', 'true');
        captcha_submit_form.style.display = "block";
    }


    fetch('hello', {
        method: "get", headers: {
            username_readonly: username_input.value,
        }
    })
        .then(res => {
            console.log(res)
            return res.json()
        })
        .catch(err => {
            console.log("local error", err);
        })
        .then((info) => {
            console.log(info);
            let images = Object.keys(info);
            for (let i = 0; i < images.length; i++) {
                const key_cur = "PIC_" + i;
                console.log(key_cur)
                const img_path = info[key_cur]
                console.log(img_path)
                const img = document.createElement("img");
                img.src = img_path;
                img.alt = key_cur;
                captcha_img_div.appendChild(img);
            }
            captcha_div.style.display = "block";
            captcha_img_div.style.display = "block";

        })
        .catch((err) => {
            alert(err)
        })
}

